// 一.组件式写法：
// import {BrowserRouter, Routes, Route, Navigate} from 'react-router-dom'
// import App from '@/App'
// import HomePage from '@/pages/homePage'
// import AmisEditor from "@/pages/amisEditor";
// // 两种路由模式的组件：BrowserRouter(history模式)，HashRouter(hash模式)
// // 路由指的就是一种对应关系，路径与组件的对应关系
//
// const baseRouter = () => (
//     <BrowserRouter>
//         <Routes>
//             <Route path='/' element={<App />}>
//                 <Route path='/' element={<Navigate to='/HomePage' />}></Route>
//                 <Route path='/HomePage' element={<HomePage />}></Route>
//                 <Route path='/AmisEditor' element={<AmisEditor />}></Route>
//             </Route>
//         </Routes>
//     </BrowserRouter>
// )
//
// export default baseRouter


// 二.对象式写法
import React,{lazy} from 'react'
import LayoutCom from '@/components/LayoutCom'

const HomePage = lazy(() => import("@/pages/homePage"))
const AmisEditor = lazy(() => import("@/pages/amisEditor"))
const Login = lazy(() => import("@/pages/login"))
const Register = lazy(() => import("@/pages/register"))


import {Navigate} from 'react-router-dom'

const widthLoadingComponent = (com: JSX.Element) => (
    <React.Suspense fallback={<div>Loading...</div>}>
        {com}
    </React.Suspense>
)

const routes = [
    {
      path: '/',
      element: <Navigate to="/homePage"/>
    },
    {
        path: '/',
        element: <LayoutCom />,
        children: [
            {
                path: '/homePage',
                element: widthLoadingComponent(<HomePage />)
            },
            {
                path: '/AmisEditor',
                element: widthLoadingComponent(<AmisEditor />)
            }
        ]
    },
    {
        path: '/login',
        element: <Login />
    },
    {
        path: '/regsiter',
        element: <Register />
    }
]
export default routes
